<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useStore } from "../stores/counter";
import { useSlots, getCurrentInstance } from 'vue';

const store = useStore();
const { count } = storeToRefs(store);
const slots = useSlots();
const instance = getCurrentInstance();
const hasDefaultSlot = !!slots.default;
console.log('slots:', slots);
console.log('hasDefaultSlot:', hasDefaultSlot);
console.log('currentInstance:', instance);
</script>

<template>
  <button
    style="
      border: 0 solid #e2e8f0;
      margin-top: 10px;
      background-color: rgb(246, 179, 82);
      border-radius: 0.25rem;
      font-weight: 700;
      padding: 0.5rem 1rem 0.5rem 1rem;
      color: rgb(24, 24, 24);
    "
    @click="store.increment"
  >
  Remote counter: {{ count }}
  <p>
    <p>this is slot</p>
    <div v-if="hasDefaultSlot">
      <slot></slot>
    </div>
    <div v-else>
      没有接收到插槽内容
    </div>
  </p>
  </button>
</template>

<style scoped />
